<template>
  <view>
    <uni-popup ref="editPop" type="bottom" zindex>
      <view class="box-con padding">
        <view class="top-title">
          <view class="modalTitle pad_cl">修改联系方式</view>
          <view class="pad_b48 padding-bottom-xs margin-top-sm text-c9 text-sm">请输入修改的联系方式</view>
          <view class="close-btn" @click="close"><text class="cuIcon-close text-lg closBtn"></text></view>
        </view>
        <view class="input-con padding-top padding-bottom">
          <view class="in-li flex align-center margin-bottom">
            <text class="acon-human iconys"></text>
            <input type="text" placeholder-class="placeholderStyle" class="flex-sub text-c9 text-sm" v-model="bindParam.name" placeholder="请输入您的姓名"/>
          </view>
          <view class="in-li flex align-center">
            <text class="acon-a-carlis5 iconys"></text>
            <input type="text" placeholder-class="placeholderStyle" class="flex-sub text-c9 text-sm" v-model="bindParam.mobile" placeholder="请输入手机号"/>
          </view>
        </view>
        <view class="f-btn" @click="sureBtn">
          <text>确定</text>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script lang="ts" setup>
  import { ref, computed, onMounted } from 'vue'
  const emit = defineEmits(["confirm"])
  const editPop = ref(null)
  const bindParam = ref({
    mobile:'',
    name:''
  })
  
  const  open = () => {
    editPop.value.open()
  }
  
  const close  = () => {
    editPop.value.close()
  }
  
  const sureBtn = () => {
    close()
    emit('confirm',bindParam)
  }
  
  defineExpose({ open, close })
  
</script>

<style lang="scss">
  .box-con {
    background-color: #fff;
    border-radius: 16rpx 16rpx 0 0;
    padding-bottom: 40rpx;
    flex-shrink: 0;
    min-height: 602rpx;
    max-height: 96vh;
    position: relative;
    .modalTitle {
      font-size: 36rpx;
      font-weight: bold;
    }
  }
  .modalTitle {
    font-size: 36rpx;
    font-weight: bold;
  }
  .close-btn {
    position: absolute;
    right: 30rpx;
    top: 30rpx;
  }
  .in-li{
    border-radius: 4px;
    border: 1px solid #56BF7A;
    background: #FFF;
    height: 72rpx;
    .iconys{
      font-size: 30rpx;
      padding-left: 20rpx;
      margin-right: 20rpx;
      color: #56BF7A;
    }
    .placeholderStyle {
    	color: #CBCBCB;
    }
  }
  .f-btn{
    width: 654rpx;
    padding: 16px 32px;
    border-radius: 100px;
    background: #56BF7A;
    color: #fff;
    font-weight: 400;
    text-align: center;
    margin: 60rpx auto 0;
  }
</style>